<html id="html"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>%SITE-TITLE%</title>

<style type="text/css" media="screen">
html {
    background: url("%IMG_BACKGROUND%") no-repeat center center, url("qrc:html/sd_bg.svg");
    background-size: %B_SIZE%;
    background-attachment: fixed;
}

body {
    font-family: sans-serif;
    color: #eaeaea;
    direction: %DIRECTION%;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,175,255, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(0,175,255, 0.1);
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,175,255, 0.6)
}

body * {
    -webkit-user-select: none;
    font-size: 100%;
    line-height: 1.6;
    margin: 0;
}

.add {
    %RIGHT_STR%: 6px;
    background: url(qrc:html/plus.svg);
    height: 32px;
    outline: none;
    position: fixed;
    bottom: 10px;
    width: 32px;
}

.sett {
    %RIGHT_STR%: 6px;
    background: url(qrc:html/configure.svg);
    height: 32px;
    outline: none;
    position: fixed;
    top: 10px;
    width: 32px;
}

.add:hover {
    background-color: rgba(0,0,0, 0.5);
    box-shadow: 0 0 1px 2px rgba(0,175,255, 0.5);
    cursor: pointer;
}

.sett:hover {
    background-color: rgba(0,0,0, 0.5);
    box-shadow: 0 0 1px 2px rgba(0,175,255, 0.5);
    cursor: pointer;
}

#quickdial {
    outline: none;
    margin: auto;
    text-align: center;
}

#quickdial div.entry {
    background-color: rgba(0,0,0, 0.4);
    position: relative;
    float: %LEFT_STR%;
    margin: 5px;
    border-radius: 1px;
    border: 1px solid rgba(0,0,0, 0.3);
    background-clip: padding-box;
}

#quickdial div.entry:hover {
    box-shadow: 0 0 0 2px rgba(0,175,255, 0.5);
}

#quickdial img {
    display: block;
    margin: auto;
    border-radius: 0px 0px 0 0;
}

#quickdial img[src="%LOADING-IMG%"]{
    margin: 10% auto auto auto;
    height: 66%;
    width: 44%;
}

#quickdial img[src=""] {
    visibility: hidden;
}

#quickdial a {
    position: absolute;
    %LEFT_STR%: 0;
    top: 0;
    width: 100%;
    height: 87%;
}

span.boxTitle {
    width: 80%;
    position: absolute;
    %LEFT_STR%: 0;
    bottom: 0px;
    margin: 0 10%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}

span.edit, span.close, span.reload {
    width: 9%;
    height: 13%;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    min-width: 16px;
    min-height: 16px;
}

span.edit {
    %LEFT_STR%: 1px;
    bottom: 1px;
    background: url(qrc:html/edit.svg);
}

span.close {
    %RIGHT_STR%: 1px;
    bottom: 1px;
    background: url(qrc:html/close.svg);
}

span.reload {
    %RIGHT_STR%: 1px;
    top: 1px;
    background: url(qrc:html/reload.svg);
}

span.edit:hover {
    background: url(qrc:html/edit_active.svg);
}

span.reload:hover {
    background: url(qrc:html/reload_active.svg);
}

span.close:hover {
    background: url(qrc:html/close_active.svg)
}

div.entry:hover .edit, div.entry:hover .close, div.entry:hover .reload {
    display: inline;
}

#overlay-edit {
    outline: none;
    width: 500px;
    margin-%LEFT_STR%: auto;
    margin-%RIGHT_STR%: auto;
    margin-top: 5%;
    background-color: rgba(0,0,0, 0.6);
    border-radius: 1px;
    border: 1px solid rgba(0,0,0, 0.8);
    box-shadow: 0 0 0 1px rgba(255,255,255, 0.6);
    padding: 15px;
    padding-bottom: 0;
}

#overlay-edit img {
    display: block;
    margin-%LEFT_STR%: auto;
    margin-%RIGHT_STR%: auto;
    max-width: 100%;
    max-height: auto;
}

#overlay-edit img[src="%LOADING-IMG%"] {
    width: 54px;
    height: 55px;
}

#overlay-edit .buttonbox input {
    margin-%RIGHT_STR%: 0;
    margin-%LEFT_STR%: 3px;
}

#overlay-edit table {
    width: 100%;
    margin-%LEFT_STR%: auto;
    margin-%RIGHT_STR%: auto;
}

#overlay-edit table input[type="text"] {
    width: 100%;
    -webkit-user-select: auto;
    background-color: #eeeeee;
    border-radius: 1px;
}

#settingsBox {
    outline: none;
    margin-%LEFT_STR%: auto;
    margin-%RIGHT_STR%: auto;
    margin-top: 1%;
    width: 365px;
    max-width: 377px;
    height: auto;
    max-height: 120%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px 20px 0;
    background-color: rgba(0,0,0, 0.6);
    border-radius: 1px;
    border: 1px solid rgba(0,0,0, 0.8);
}

#settingsBox .content {
    margin-%LEFT_STR%: auto;
    margin-%RIGHT_STR%: auto;
    padding-bottom: 5px;
    border-bottom: 1px solid #888888;
    text-align: center;
}

#settingsBox .thumbhold {
    margin-%LEFT_STR%: auto;
    margin-%RIGHT_STR%: auto;
    margin-bottom: 5px;
    border-radius: 1px;
    text-align: center;
    width: 360px;
    height: 200px;
    background: #aaaaaa;
}

#settingsBox .thumbhold p {
    padding: 0;
    background: rgba(0,0,0, 0.4);
    url("%IMG_BACKGROUND%") no-repeat center center;
    background-size: %B_SIZE%;
    width: 358px;
    height: 198px;
    border-radius: 1px;
    position: relative;
    %LEFT_STR%: 1px;
    top: 1px;
    line-height: 198px;
    cursor: default;
}

#settingsBox p label {
    margin: 2px;
    padding: 1px;
    text-align: center;
}

#settingsBox p select {
    margin: 2px;
    padding: 1px;
    text-align: center;
    width: auto;
}

#settingsBox p select option {
    text-align: center;
}

#settingsBox .togop {
    margin-bottom: 1px;
    padding-bottom: 2px;
}

#settingsBox .button {
    margin: 5px;
    padding: 1px;
    text-align:center;
    width: 98%;
}

#settingsBox .rowsel {
    margin: 2px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(135,135,135, 1.0);
}

#settingsBox .rowsel input {
    background-color: rgba(0,0,0, 0.4);
    text-align: center;
    width: 80%;
    height: 12px;
    margin: 0;
    padding-bottom: 0;
}

#settingsBox .rowsel span {
    font-weight: bold;
    text-align: center;
    margin: 2px;
    margin-%RIGHT_STR%: 7px;
    display: inline-block;
    width: 25px;
}

#ImgSelector {
    position:relative;
    z-index: 1;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 360px;
    height: 200px;
    text-shadow: 1px 1px 2px #000000, 0 0 1em #000000;
}

#ImgSelectorMenu {
    position:relative;
    z-index: 2;
    bottom: 115px;
    right: -120px;
    text-shadow: 1px 1px 2px #000000, 0 0 1em #000000;
}

#ImgSelectorToggle {
    position:relative;
    z-index: 2;
    left: 10px;
    bottom: 210px;
    text-shadow: 1px 1px 2px #000000, 0 0 1em #000000;
}

.buttonbox {
    margin-bottom: 10px;
    text-align: %RIGHT_STR%;
}

.overlay {
    background: rgba(128,128,128, 0.8);
    background: -webkit-radial-gradient(rgba(127,127,127, 0.5), rgba(127,127,127, 0.5) 35%, rgba(0,0,0, 0.7));
    bottom: 0;
    %LEFT_STR%: 0;
    padding: 20px;
    padding-bottom: 130px;
    position: fixed;
    %RIGHT_STR%: 0;
    top: 0;
}

input[type=button], select {
    padding: 0px;
    margin: 5px;
    outline: none;
    background: rgba(0,0,0, 0.8);
    box-shadow: 0 0 1px 2px rgba(255,255,255, 0.5);
    border: 6px;
    border-radius: 2px;
    color: #eaeaea;
    width: 135px;
    height: 32px;
    font-weight: bold;
}

input[type=button]:hover, input[type=text]:hover, select:hover {
    box-shadow: 0 0 1px 2px rgba(0,175,255, 0.8);
    background: rgba(0,175,255, 0.3);
    transition: 0.1s;
    cursor: pointer;
}

input[type=button]:active, select:active {
    background: rgba(90,165,255, 0.8);
    box-shadow: 0 0 1px 2px rgba(0,175,255, 0.8);
}

input[type=text] {
    padding: 5px;
    margin: 5px;
    width: 100%;
    background-color: rgba(0,0,0, 0.6) !important;
    outline: none;
    box-shadow: 0 0 1px 2px rgba(255,255,255, 0.5);
    border: 6px;
    border-radius: 2px;
    color: rgba(234,234,234, 1.0);
    width: 135px;
    height: 32px;
}

input[type=range] {
    height: 26px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 115%;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 115%;
    height: 20px;
    cursor: pointer;
    background: rgba(80,85,90, 1.0);
    border-radius: 14px;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: none;
  height: 20px;
  width: 40px;
  border-radius: 12px;
  background: rgba(0,175,255, 1.0);
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(80,85,90, 1.0);
}

input[type=range]:disabled::-webkit-slider-thumb,
input[type=range]:disabled:hover::-webkit-slider-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255, 0.5);
    background: rgba(0,0,0, 0.0);
    color: #f00;
}

input[type=checkbox] {
    visibility: hidden;
}

.checkbox {
    width: 340px;
    margin: 20px 3px;
    position: relative;
}

.checkbox label {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    box-shadow: 0 0 1px 2px rgba(255,255,255, 0.5);
    border: 1px;
    border-radius: 2px;
    background: #111111;
}

.checkbox label:hover {
    box-shadow: 0 0 1px 2px rgba(0,175,255, 0.8);
    transition: 0.2s;
    cursor: pointer;
}

.checkbox label:after {
    opacity: 0.1;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 7px;
    border: 3px solid #dddddd;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

.checkbox label:hover::after {
    opacity: 0.3;
}

.checkbox input[type=checkbox]:checked + label:after {
    opacity: 1;
}

</style>

<script type="text/javascript" src="%JQUERY%"></script>
<script type="text/javascript" src="%JQUERY-UI%"></script>
<script type="text/javascript">
var LOADING_IMAGE = '%LOADING-IMG%';
var URL = '%URL%';
var TITLE = '%TITLE%';
var EDIT = '%APPLY%';
var NEW_PAGE = '%NEW-PAGE%';
var TITLE_EDIT = '%TITLE-EDIT%';
var TITLE_REMOVE = '%TITLE-REMOVE%';
var TITLE_RELOAD = '%TITLE-RELOAD%';
var TITLE_FETCHTITLE = '%TITLE-FETCHTITLE%';
var MAX_PAGES_ROW = %ROW-PAGES%;
var DIAL_WIDTH = %SD-SIZE%;
var SD_CENTER = %SD-CENTER%;
var editingId = -1;
var ignoreNextChanged = false;

if ("%IMG_BACKGROUND%" == '')
    document.getElementById("html").style.backgroundSize = "cover";

$(document).keyup(function(e) {
    if (editingId == -1)
        return;
    if (e.keyCode == 13)
        boxEdited();
    else if (e.keyCode == 27)
        $('#fadeOverlay').click();
});

function emitChanged(pages)
{
    ignoreNextChanged = true;
    external.speedDial.changed(pages);
}

function addSpeedDial()
{
    onEditClick(addBox('', NEW_PAGE, ''));
    alignPage();
}

function configureSpeedDial()
{
    // ====================== LOAD SETTINGS ========================= //
    $('#PgInRow').val(MAX_PAGES_ROW);
    $('#sliderValuePg').html(MAX_PAGES_ROW);
    $('#SdSize').val(DIAL_WIDTH);
    $('#SdSizeToggle').prop('checked', DIAL_WIDTH != 240);
    $('#sliderValueSd').html(DIAL_WIDTH);
    $('#BgImgSelSiz').val('%B_SIZE%').attr('selected', 'selected');
    $('#BgImgToggle').prop('checked', "%IMG_BACKGROUND%" != "");
    $('#SdCntrToggle').prop('checked', SD_CENTER);
    $('#BgImgToggle').is(':checked') ? $('#BgImgSel').removeAttr('disabled') : $('#BgImgSel').attr('disabled', 'disabled');
    $('#BgImgToggle').is(':checked') ? $('#BgImgSelSiz').removeAttr('disabled') : $('#BgImgSelSiz').attr('disabled', 'disabled');
    $('#SdSizeToggle').is(':checked') ? $('#SdSize').removeAttr('disabled') : $('#SdSize').attr('disabled', 'disabled');
    if ($('#BgImgToggle').prop('checked') != true) {
        $('#ImgSelectorMenu').css({'color' : 'rgba(0,0,0, 0.0)', 'text-shadow' : 'none'});
        $('#BgImgSel').css({'color' : 'rgba(0,0,0, 0.0)', 'text-shadow' : 'none'});
        $('#BgImgSelSiz').css('visibility', 'hidden');
        }
    if ($('#SdSizeToggle').prop('checked') != true)
        $('#SdSizeStateColor').css('color', 'rgba(0,0,0, 0.0)');
    // ======================== SHOW DIALOG ======================== //
    $('#fadeOverlay2').css({'filter' : 'alpha(opacity=100)'}).fadeIn();
    $('#fadeOverlay2').click(function() { $(this).fadeOut('slow'); });
    $('#settingsBox').click(function(event) { event.stopPropagation(); });
}
function escapeTitle(title) {
    title = title.replace(/"/g, '&quot;');
    title = title.replace(/'/g, '&apos;');
    return title;
}

function unescapeTitle(title) {
    title = title.replace(/&quot;/g, '"');
    title = title.replace(/&apos;/g, '\'');
    return title;
}

function escapeUrl(url) {
    url = url.replace(/"/g, '');
    url = url.replace(/'/g, '');
    return url;
}

function onRemoveClick(box) {
    removeBox($(box).index());
}

function onFetchTitleClick(checkbox) {
    var displayStyle;
    checkbox.checked ? displayStyle = 'hidden' : displayStyle = 'visible';
    $('#titleLine').css({'visibility' : displayStyle });
}

function hideEditBox() {
    $('#fadeOverlay').fadeOut("slow", function() {$("#fadeOverlay").remove();});
}

function onEditClick(box) {
    editingId = $(box).index();
    var boxUrl = $(box).children('a').first().attr('href');
    var boxTitle = escapeTitle($(box).children('span').first().text());
    if (boxUrl === '')
        boxUrl = 'http://';

    $('body').append('<div id="fadeOverlay" class="overlay" style="display:none;">' +
        '<div id="overlay-edit">' +
        '<img src="' + $(box).children('img').first().attr('src') + '"> ' +
        '<table><tr><td>' + URL + ': </td><td>' +
        '<input type="text" id="formUrl" value="' + boxUrl + '"></td></tr>' +
        '<tr id="titleLine"><td>' + TITLE + ': </td><td>' +
        '<input type="text" id="formTitle" value="' + boxTitle + '"></td></tr>' +
        '<tr><td></td><td><div class="checkbox"><input type="checkbox" id="fetchTitle" onclick="onFetchTitleClick(this)">' +
        '<label for="fetchTitle"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ' + TITLE_FETCHTITLE + ' </div></td></tr>' +
        '</table><p class="buttonbox"><input type="button" value=" %CANCEL% " onClick="hideEditBox();location.reload();">&nbsp;&nbsp;&nbsp;' +
        '<input type="button" value="   ' + EDIT + '   " onClick="boxEdited()"></p>' +
        '</div></div>');

    $('#fadeOverlay').css({'filter' : 'alpha(opacity=100)'}).fadeIn();
    $('#fadeOverlay').click(function() {hideEditBox()});
    $('#overlay-edit').click(function(event) { event.stopPropagation(); });
    $('#formUrl').focus().val($('#formUrl').val()); // focus and move cursor to end
}

function onReloadClick(box) {
    var url = $(box).children('a').first().attr('href');
    var img = $(box).children('img').first();

    if (url === '')
        return;

    $(img).attr('src', LOADING_IMAGE);
    external.speedDial.loadThumbnail(url, false);
}

function boxEdited() {
    if (editingId == -1)
        return;

    external.speedDial.urlFromUserInput($('#formUrl').val(), function(newUrl) {
        var box = document.getElementById('quickdial').getElementsByTagName('div')[editingId];
        var a = box.getElementsByTagName('a')[0];
        var originalUrl = a.getAttribute('href');
        setBoxUrl(editingId, newUrl);
        setBoxTitle(editingId, $('#formTitle').val());
        var changedUrl = a.getAttribute('href');
        var fetchTitleChecked = document.getElementById('fetchTitle').checked;

        var pages = allPages();

        if (fetchTitleChecked || (originalUrl != changedUrl && changedUrl !== '') ) {
            var img = box.getElementsByTagName('img')[0];
            img.setAttribute('src', LOADING_IMAGE);

            $('#fadeOverlay').fadeOut("slow", function() {
                $("#fadeOverlay").remove();
            });
            external.speedDial.loadThumbnail(a.getAttribute('href'), fetchTitleChecked);
        } else {
            hideEditBox();
        }
        emitChanged(pages);
    });
}

function allPages() {
    var urls = $('a[class="boxUrl"]');
    var titles = $('span[class="boxTitle"]');
    var value = "";
    $('div.entry').each(function(i) {
        var url = $(this).children('a').first().attr('href');
        var title = $(this).children('span[class="boxTitle"]').first().text();

        value += 'url:"' + escapeUrl(url) + '"|title:"' + escapeTitle(title) + '";';
    });

    return value;
}

function reloadAll() {
    if (confirm("%TITLE-WARN-REL%"))
        $('div.entry').each(function(i) {
            onReloadClick($(this));
        });
}

function addBox(url, title, img_source) {
    var div = document.createElement('div');
    div.setAttribute('class', 'entry');
    var img = document.createElement('img');
    img.setAttribute('src', img_source);
    var a = document.createElement('a');
    a.setAttribute('href', url);
    a.setAttribute('class', 'boxUrl');
    var span1 = document.createElement('span');
    span1.setAttribute('class', 'boxTitle');
    span1.setAttribute('title', unescapeTitle(title));
    span1.innerText = unescapeTitle(title);
    var span2 = document.createElement('span');
    span2.setAttribute('class', 'edit');
    span2.setAttribute('onClick', 'onEditClick(parentNode)');
    span2.setAttribute('title', TITLE_EDIT);
    var span3 = document.createElement('span');
    span3.setAttribute('class', 'close');
    span3.setAttribute('onClick', 'onRemoveClick(parentNode)');
    span3.setAttribute('title', TITLE_REMOVE);
    var span4 = document.createElement('span');
    span4.setAttribute('class', 'reload');
    span4.setAttribute('onClick', 'onReloadClick(parentNode)');
    span4.setAttribute('title', TITLE_RELOAD);
    div.appendChild(img);
    div.appendChild(img);
    div.appendChild(a);
    div.appendChild(span1);
    div.appendChild(span2);
    div.appendChild(span3);
    div.appendChild(span4);
    document.getElementById("quickdial").appendChild(div);
    if (img_source == LOADING_IMAGE) {
        external.speedDial.loadThumbnail(url, false);
    }
    return div;
}

function setBoxImage(id, img_source) {
    var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
    if (box === undefined)
        return;
    var img = box.getElementsByTagName('img')[0];
    img.setAttribute('src', img_source + '?' + new Date());
}

function setTitleToUrl(url, title) {
    var changed = false;
    var boxes = document.getElementById('quickdial').getElementsByTagName('div');
    for (i = 0; i < boxes.length; ++i) {
        var box = boxes[i];

        if (box === undefined)
            continue;

        var boxUrl = box.getElementsByTagName('a')[0].getAttribute('href');
        if (url != boxUrl)
            continue;

        var span = box.getElementsByTagName('span')[0];
        if (span.innerText != title) {
            changed = true;
            span.innerText = title;
        }
    }
    if (changed)
        emitChanged(allPages());
}

function setImageToUrl(url, img_source) {
    var aElement = $('a[href="' + url + '"]');
    $(aElement).each(function() {
        var box = $(this).parent();
        var imgElement = $(box).children("img").first();
        if ($(imgElement).size() == 0)
            return;
        $(imgElement).attr('src', img_source/* + '?' + new Date()*/);
    });
}

function setBoxUrl(id, url) {
    var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
    if (box === undefined)
        return;
    var a = box.getElementsByTagName('a')[0];
    a.setAttribute('href', url);
}

function setBoxTitle(id, title) {
    var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
    if (box === undefined)
        return;
    var span = box.getElementsByTagName('span')[0];
    span.innerText = title;
}

function removeBox(id) {
    if (confirm("%TITLE-WARN%"))
        var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
    if (box === undefined)
        return;
    var url = box.getElementsByTagName('a')[0].getAttribute('href');
    document.getElementById("quickdial").removeChild(box);
    alignPage();
    external.speedDial.removeImageForUrl(url);
    emitChanged(allPages());
}

function alignPage() {
    var dialHeight = Math.floor(Math.round(DIAL_WIDTH / 1.54));
    $('head').append('<style>#quickdial img{height:auto;width:'+DIAL_WIDTH+'px}</style>');
    $('#quickdial div.entry').css({'width' : DIAL_WIDTH + 'px',
        'height' : dialHeight  + 'px'});
    var fullwidth = $(window).width();
    var width = Math.floor(fullwidth - 76);    var height = $(window).height();
    var boxWidth = Math.floor(DIAL_WIDTH + 12);
    var boxHeight = dialHeight + 22;
    var maxBoxes = Math.floor(width / boxWidth);
    if (maxBoxes > MAX_PAGES_ROW) maxBoxes = MAX_PAGES_ROW;
    if (maxBoxes < 1) maxBoxes = 1;
    var maxwidth = maxBoxes * boxWidth;
    $("#quickdial").css('width', maxwidth + 'px');
    var boxesCount = $("#quickdial").children("div").size();
    var rows = Math.ceil(boxesCount / maxBoxes);
    var margintop = (height - rows * boxHeight) / 2;
    if (margintop < 0) margintop = 0;
    $("#quickdial").css('margin-top', margintop + 'px');
    $("span.boxTitle").css('font-size', ((dialHeight - DIAL_WIDTH / 1.77) / 1.5) + 'px');
    if (SD_CENTER)
        enableCentering();
    else
        disableCentering();
    
}

function bgImageSel() {
    external.speedDial.getOpenFileName(function(arr) {
        if (arr.length) {
            document.getElementById('BgImgHold').value = arr[0];
            document.getElementById('BgImgHoldUrl').value = arr[1];
            bgImgUpdate();
        }
    });
}

function saveSettings() {
    MAX_PAGES_ROW = $('#PgInRow').val();
    DIAL_WIDTH = parseInt($('#SdSize').val());
    SD_CENTER = $('#SdCntrToggle').prop('checked');
    external.speedDial.setBackgroundImage($('#BgImgHoldUrl').val());
    external.speedDial.setBackgroundImageSize($('#BgImgSelSiz').val());
    external.speedDial.setPagesInRow(MAX_PAGES_ROW);
    external.speedDial.setSdSize(DIAL_WIDTH);
    external.speedDial.setSdCentered(SD_CENTER);
    alignPage();
}

function bgImgToggle() {
    var check = document.getElementById('BgImgToggle');
    var BgImgSel = document.getElementById('BgImgSel');
    var BgImgHoldUrl = document.getElementById('BgImgHoldUrl');
    var BgImgSz = document.getElementById('BgImgSelSiz');
    BgImgSel.disabled = (check.checked ? false : true);
    BgImgHoldUrl.disabled = (check.checked ? false : true);
    BgImgSz.disabled = (check.checked ? false : true);
    BgImgHoldUrl.value = (check.checked ? "%URL_BACKGROUND%" : '');
    if ($('#BgImgToggle').prop('checked') != true) {
        $('#ImgSelectorMenu').css({'color' : 'rgba(0,0,0, 0.0)', 'text-shadow' : 'none'});
        $('#BgImgSel').css({'color' : 'rgba(0,0,0, 0.0)', 'text-shadow' : 'none'});
        $('#BgImgSelSiz').css('visibility', 'hidden');
    } else {
        $('#ImgSelectorMenu').css({'color' : '#eaeaea', 'text-shadow' : '1px 1px 2px #000000, 0 0 1em #000000'});
        $('#BgImgSel').css({'color' : '#eaeaea', 'text-shadow' : '1px 1px 2px #000000, 0 0 1em #000000'});
        $('#BgImgSelSiz').css('visibility', 'visible');
    };
}

function sdSizeToggle() {
    var check = document.getElementById('SdSizeToggle');
    var SdSize = document.getElementById('SdSize');
    var SdSizeSl = document.getElementById('sliderValueSd');
    SdSize.disabled = (check.checked ? false : true);
    SdSize.value = (check.checked ? SdSize.value : 240);
    SdSizeSl.innerHTML = (check.checked ? DIAL_WIDTH : 240);
    if ($('#SdSizeToggle').prop('checked') != true) {
        $('#SdSizeStateColor').css('color', 'rgba(0,0,0, 0.0)');
    } else {
    $('#SdSizeStateColor').css('color', '#eaeaea')
    }
}

function bgImgUpdate() {
    var imgUrl = document.getElementById('BgImgHold').value;
    var imgSize = document.getElementById('BgImgSelSiz').value;
    var imgThumb = document.getElementById('thumb');
    imgThumb.style.backgroundImage = 'url("' + imgUrl + '")';
    imgThumb.title = imgUrl.substring(imgUrl.lastIndexOf('/')+1);
    imgThumb.style.backgroundSize = imgSize;
    document.documentElement.style.backgroundImage = 'url("' + imgUrl + '")';
    document.documentElement.style.backgroundSize = imgSize;
}

function enableCentering() {
    $('#quickdial div.entry').css({
        float: 'none',
        display: 'inline-block'
    });
}

function disableCentering() {
    $('#quickdial div.entry').css({
        float: '%LEFT_STR%',
        display: 'block'
    });
}
</script>
</head>

<body>

<noscript>%JAVASCRIPT-DISABLED%</noscript>

<div id="quickdial">
</div>

<a onClick="configureSpeedDial()" title="%SETTINGS-TITLE%" class="sett"></a>
<a onClick="addSpeedDial()" title="%ADD-TITLE%" class="add"></a>

<script type="text/javascript">

function init() {
    %INITIAL-SCRIPT%
    external.speedDial.pagesChanged.connect(function() {
        if (ignoreNextChanged) {
            ignoreNextChanged = false;
            return;
        }
        window.location.reload();
    });

    external.speedDial.thumbnailLoaded.connect(setImageToUrl);
    external.speedDial.pageTitleLoaded.connect(setTitleToUrl);

    $(window).resize(function() { alignPage(); });
    $("#quickdial").sortable({
        revert: true,
        cursor: 'move',
        containment: 'document',
        opacity: 0.8,
        distance: 40,
        start: function(event, ui) {
            disableCentering();
        },
        stop: function(event, ui) {
            if (SD_CENTER)
                enableCentering();
        },
        update: function(event, ui) {
            emitChanged(allPages());
        }
    });
    alignPage();
}

</script>

<div id="fadeOverlay2" class="overlay" style="display:none;">
<div id="settingsBox">
    <div class="checkbox">
        <input type="checkbox" id="SdCntrToggle" name="sdcntrt"/>
        <label for="SdCntrToggle"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%TXT_CNTRDLS%
    </div>
    <div class="togop">
        <p align="center"><label for="PgInRow">%TXT_NRROWS%</label></p>
    </div>
    <div class="rowsel">
        <span id="sliderValuePg"></span>
        <input id="PgInRow" type="range" min="2" max="10" step="1" oninput="$('#sliderValuePg').html(this.value);" />
    </div>
    <div class="checkbox">
        <input type="checkbox" id="SdSizeToggle" name="sdsizet" onchange="sdSizeToggle()" />
        <label for="SdSizeToggle"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%TXT_SDSIZE%
    </div>
    <div class="rowsel">
        <div id="SdSizeStateColor">
            <span id="sliderValueSd" color="#f00"></span>
            <input id="SdSize" type="range" min="100" max="500" step="1" oninput="$('#sliderValueSd').html(this.value);" />
        </div>
    </div>
    <div id="ImgSelector">
        <div id="BgImgSel" class="thumbhold" onclick="if($('#BgImgSelSiz').attr('disabled')!='disabled') {bgImageSel();}" disabled="disabled"><p id="thumb">%TXT_SELECTIMAGE%</p>
        </div>
        <p>
            <input id="BgImgHold" type="hidden" value="%IMG_BACKGROUND%" />
            <input id="BgImgHoldUrl" type="hidden" value="%URL_BACKGROUND%" />
        </p>
        <div class="checkbox" id="ImgSelectorToggle">
            <input type="checkbox" id="BgImgToggle" name="sdbackimg" onchange="bgImgToggle();bgImgUpdate()" />
            <label for="BgImgToggle"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%TXT_NOTE%
        </div>
        <div id="ImgSelectorMenu">
            <label for="BgImgSelSiz">%TXT_PLACEMENT%</label>
            <select id="BgImgSelSiz" name="imgselsize" onchange="bgImgUpdate()">
                <option value="contain">&nbsp;&nbsp;%TXT_FIT%</option>
                <option value="auto">&nbsp;&nbsp;%TXT_AUTO%</option>
                <option value="cover">&nbsp;&nbsp;%TXT_COVER%</option>
                <option value="100% auto">&nbsp;&nbsp;%TXT_FWIDTH%</option>
                <option value="auto 100%">&nbsp;&nbsp;%TXT_FHEIGHT%</option>
            </select>
        </div>
    </div>
    <div class="buttonbox">
        <input type="button" value=" %CANCEL% " onClick="$('#fadeOverlay2').fadeOut('slow');location.reload();" />
        <input type="button" value="   %APPLY%   " onClick="saveSettings();$('#fadeOverlay2').fadeOut('slow');location.reload();"/>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">

// ============================ Initialize =============================== //
if (window._qupzilla_external) {
    init();
} else {
    document.addEventListener('_qupzilla_external_created', init);
}

</script>
</html>
